<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="./css/layui.css">
        <style type="text/css">
              .container{
                  width: 420px;
                  height: 320px;
                  min-height: 320px;  
                  max-height: 320px;  
                  position: absolute;   
                  top: 0;  
                  left: 0;  
                  bottom: 0;  
                  right: 0;  
                  margin: auto;  
                  padding: 20px;  
                  z-index: 130;  
                  border-radius: 8px;  
                  background-color: #fff;  
                  box-shadow: 0 3px 18px rgba(100, 0, 0, .5); 
                  font-size: 16px;
              }
              .close{
                  background-color: white;
                  border: none;
                  font-size: 18px;
                  margin-left: 410px;
                  margin-top: -10px;
              }
 
            .layui-input{
                border-radius: 5px;
                width: 300px;
                height: 40px;
                font-size: 15px;
            }
            .layui-form-item{
                margin-left: -20px;
            }
            #logoid{ 
                margin-top: -16px;
                  padding-left:150px; 
                  padding-bottom: 15px;
            }
            .layui-btn{
                margin-left: -50px;
                border-radius: 5px;
                width: 350px;
                height: 40px;
                font-size: 15px;
            }
            .verity{
                width: 120px;
            }
            .font-set{
                font-size: 13px;
                text-decoration: none; 
                margin-left: 120px;
            }
            a:hover{
             text-decoration: underline; 
            }
 
        </style>
    </head>
    <body>
        <form class="layui-form" action="/reg" method="post">
            <div class="container">
                <div class="layui-form-mid layui-word-aux" >
                    <h1 style="text-align: center;">注册</h1>                   
                </div>
              <div class="layui-form-item" style="margin-top: 80px;">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                  <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">密   码</label>
                <div class="layui-input-inline">
                  <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
              </div>
               <div class="layui-form-item">
                <label class="layui-form-label">身   份</label>
                <input type="radio" name="role" value="1" title="普通用户" checked>
                <input type="radio" name="role" value="2" title="管理员" >
              </div>
 
              <div class="layui-form-item">
                <div class="layui-input-block">
                  <button class="layui-btn" lay-submit lay-filter="formDemo">注册</button>
                </div>
              </div>
                <div carousel-item="font-set" style="color: red" th:text="${msg}"></div>
                <a href="/" class="font-set">立即登陆</a>
            </div>
        </form>
        <script type="text/javascript" src="./layui.js"></script>
        <script>
            layui.use(['form', 'layedit', 'laydate'], function(){
              var form = layui.form
              ,layer = layui.layer

              //监听提交
              form.on('submit(demo1)', function(data){
                layer.alert(JSON.stringify(data.field), {
                  title: '最终的提交信息'
                })
                return false;
              });
             
              
              
            });
            </script>
    </body>
</html>